<template>
  <view class="container">
    <!-- <uni-nav-bar
      :border="false"
      statusBar
      title="巡检记录"
      color="#1F1F1F"
      left-icon="left"
      leftWidth="60rpx"
      @clickLeft="onBack"
    >
    </uni-nav-bar> -->
    <float-button name="patrol" />

    <view class="date-p">
      <uni-datetime-picker
        type="date"
        v-model="searchDate"
        @change="changeDate"
      />
    </view>

    <view class="listBox">
      <swiper
        class="swiper-box"
        :duration="300"
        :current="current"
        @change="onTabchange"
        @transition="enabled = false"
        @animationfinish="enabled = true"
      >
        <swiper-item class="swiper-item">
          <list-scroll-view
            :ref="'scrollView0'"
            :api="getPatrolRecordList"
            height="80vh"
            :init="{}"
            :refresherEnabled="enabled"
          >
            <template v-slot:list="{ data }">
              <view class="box">
                <view
                  class="item"
                  v-for="(item, i) in data"
                  :key="i"
                  @click="onClick(item)"
                >
                  <view class="t">
                    <view class="l" v-if="item?.patrolItems"
                      >{{ item?.patrolItems.split('|')[0]
                      }}{{
                        item?.patrolItems.split('|').length > 1
                          ? `...等${item?.patrolItems.split('|').length - 1}处`
                          : ''
                      }}</view
                    >
                    <view class="r"
                      ><view class="point" />{{ item?.number }}</view
                    >
                  </view>
                  <view class="b">
                    <view class="bItem">
                      <view class="name">应巡检</view>
                      <view class="value">{{ item?.shouldPatrolNum }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">已巡检</view>
                      <view class="value">{{ item?.alreadyPatrolNum }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">未巡检</view>
                      <view class="value">{{ item?.notPatrolNum }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">开始</view>
                      <view class="value">{{ item.startTime }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">结束</view>
                      <view class="value">{{ item.endTime }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">预定巡检人</view>
                      <view class="value">
                        <text v-for="(n, i) in item.patrolUserIds" :key="i"
                          >{{ $util.selectDictLabel(personData, n)
                          }}{{
                            item.patrolUserIds.length === i + 1 ? '' : ','
                          }}</text
                        >
                      </view>
                    </view>
                    <!-- <view class="bItem">
                      <view class="name">结束人</view>
                      <view class="value">{{ item.finishNickName }}</view>
                    </view> -->
                  </view>
                  <view
                    :class="{
                      status: true,
                      warn: item.isFinish == 0,
                    }"
                    v-if="item.isFinish == 0"
                  >
                    未结束
                  </view>
                  <view
                    :class="{
                      status: true,
                    }"
                    v-else
                    >{{ $util.selectDictLabel(finishType, item?.finishType) }}
                    巡检结束
                  </view>
                </view>
              </view>
            </template>
            <template #empty>
              <view class="uni-nodata">暂无数据!</view>
            </template>
          </list-scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import { getUserAllList, getSpaceIdByQrCode } from '@/api/index';
import { getPatrolRecordList } from '@/api/patrol';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
export default {
  components: {
    FilterView,
    ListScrollView,
  },
  data() {
    return {
      finishType: [
        {
          label: '手动',
          text: '手动',
          value: 'manually',
        },
        {
          label: '自动',
          text: '自动',
          value: 'automatic',
        },
      ],
      queryData: {},
      personData: [],
      // api
      getPatrolRecordList,
      // swiper
      current: 0,
      enabled: true,
      data: ['列表'],
      // 日期时间
      spaceId: '',
      searchDate: this.$util.timestampToTime(
        new Date().getTime(),
        'YYYY-MM-DD'
      ),
    };
  },
  onLoad(query) {
    // if (query) {
    //   // 解码
    //   // let path = decodeURIComponent(query);
    //   let path = query;
    //   // 取url路径参数
    //   const params = _.split(path, '?');
    //   let formattedParams = _.chain(params[params.length - 1])
    //     .split('&')
    //     .map(_.ary(_.partial(_.split, _, '='), 1))
    //     .fromPairs()
    //     .value();
    //   getSpaceIdByQrCode(formattedParams).then((res) => {
    //     this.queryData = {
    //       spaceId: res.data,
    //     };
    //     this.$nextTick(() => {
    //       this.$refs[`scrollView0`].searchData(this.queryData);
    //     });
    //   });
    // } else {
    //   this.$nextTick(() => {
    //     this.$refs[`scrollView0`].searchData(this.queryData);
    //   });
    // }
    this.$nextTick(() => {
      if (Object.keys(query).length) {
        // 解码
        getSpaceIdByQrCode(query).then((res) => {
          this.queryData = {
            spaceId: res.data,
            searchDate: this.searchDate,
          };
          this.spaceId = res.data || '';
          this.$nextTick(() => {
            this.$refs[`scrollView0`].searchData(this.queryData);
          });
        });
      } else {
        this.$nextTick(() => {
          this.$refs[`scrollView0`].searchData({
            ...this.queryData,
            searchDate: this.searchDate,
          });
        });
      }
      this.init();
    });
  },
  onShow() {},
  methods: {
    // 刷新
    changeDate(v) {
      this.searchDate = v;
      console.log('this.searchDate', this.searchDate, v);
      this.$refs[`scrollView0`].searchData({
        searchDate: this.searchDate,
        spaceId: this.spaceId || null,
      });
    },
    init() {
      getUserAllList().then((res) => {
        this.personData = res.data.map((item) => {
          return {
            ...item,
            label: item.nickName,
            value: item.userId,
          };
        });
      });
    },
    onCancel(e) {
      this.queryData.patrolItems = '';
      this.$refs[`scrollView${this.current}`].searchData(this.queryData);
    },
    onSearch(e) {
      this.$refs[`scrollView${this.current}`].searchData(this.queryData);
    },
    // 跳转
    onClick(item) {
      // url参数
      let obj = {
        patrolRecordId: item.patrolRecordId,
      };
      let str = this.$util.jsonToUrlParam(obj);
      this.onLocation(`/pages/patrol/detail?${str}`);
    },
    // swiper
    onTabchange(e) {
      let index = e.target.current || e.detail.current;
      this.current = index;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .date-p {
    padding: 20rpx;
  }
  .listBox {
    flex: 1 1 auto;
    position: relative;
    margin-top: 20rpx;
    .swiper-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .box {
      margin: 0 36rpx;
    }
    .item {
      line-height: 1;
      margin-bottom: 30rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(0, 0, 0, 0.06);
      letter-spacing: 4rpx;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      .t {
        padding: 24rpx 34rpx 16rpx;
        border-bottom: 2rpx solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l {
          font-size: 32rpx;
          color: #333333;
          line-height: 38rpx;
        }
        .r {
          font-size: 32rpx;
          color: #505050;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .point {
            width: 12rpx;
            height: 12rpx;
            margin-right: 6rpx;
            background: #ffb93b;
            border-radius: 50%;
          }
        }
      }
      .b {
        padding: 26rpx 34rpx 32rpx;
        .bItem {
          margin-bottom: 16rpx;
          display: flex;
          align-items: baseline;
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            width: 35%;
            font-size: 28rpx;
            color: #989898;
            line-height: 33rpx;
          }
          .value {
            flex: 1;
            font-size: 28rpx;
            color: #505050;
            line-height: 33rpx;
          }
        }
      }
      .status {
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        padding: 8rpx 20rpx;
        background: #409eff;
        border-radius: 20rpx;
        position: absolute;
        top: 106rpx;
        right: 42rpx;
        &.warn {
          background: #e6a23c;
        }
      }
    }
  }
}
</style>
